{% extends "v1/base.html" %}
{% block content %}

<div id="export" class="export">
<a href="http://172.16.3.119:9999/static/xlsx/risk_aging.xlsx" ><span>导出数据</span></a>
</div>
  
<div id="year" class="data"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("year")); 
    var dateStr = "{{ item['risk_aging_x'] }}";
    var xAxisList = dateStr.split(';');
    var seriesList = "{{ item['overdueRate_Cnt'] }}".split('abcd')
    
    var seriesData = [];
    seriesList.forEach(function (element) {
        var semiMap = JSON.parse(element.replace(/&#34;/g,'"'))
        seriesData.push(semiMap);
    }); 
    
    option = {
        title: {
            text: '人数',
            textStyle:{
                fontSize:18
            }
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data:"{{ item['legend'] }}".split(';')
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: xAxisList,
            name:'期数',
            nameLocation:'center'
        },
        yAxis: {
            type: 'value',
            name:'账龄损失率-%',
            nameLocation:'end',    
            nameTextStyle:{
                color:'#FF00FF'
            }
        },
        series: seriesData
    };

    // 使用刚指定的配置项和数据显示图表。  
    myChart.setOption(option); 
</script>



<div id="month" class="data"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("month")); 
    var dateStr = "{{ item['risk_aging_x'] }}";
    var xAxisList = dateStr.split(';');
    var seriesList = "{{ item['overdueRate_LoanBenJin'] }}".split('abcd')
    
    var seriesData = [];
    seriesList.forEach(function (element) {
        var semiMap = JSON.parse(element.replace(/&#34;/g,'"'))
        seriesData.push(semiMap);
    }); 
    
    option = {
        title: {
            text: '放款金额',
            textStyle:{
                fontSize:18
            }
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data:"{{ item['legend'] }}".split(';')
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: xAxisList,
            name:'期数',
            nameLocation:'center'
        },
        yAxis: {
            type: 'value',
            name:'账龄损失率-%',
            nameLocation:'end',
            nameTextStyle:{
                color:'#FF00FF'
            }
        },
        series: seriesData
    };

    // 使用刚指定的配置项和数据显示图表。  
    myChart.setOption(option); 
</script>



<div id="week" class="data"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("week")); 
    var dateStr = "{{ item['risk_aging_x'] }}";
    var xAxisList = dateStr.split(';');
    var seriesList = "{{ item['overdueRate_restBenJin'] }}".split('abcd')
    
    var seriesData = [];
    seriesList.forEach(function (element) {
        var semiMap = JSON.parse(element.replace(/&#34;/g,'"'))
        seriesData.push(semiMap);
    }); 
    
    option = {
        title: {
            text: '在贷余额',
            textStyle:{
                fontSize:18
            }
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data:"{{ item['legend'] }}".split(';')
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: xAxisList,
            name:'期数',
            nameLocation:'center'
        },
        yAxis: {
            type: 'value',
            name:'账龄损失率-%',
            nameLocation:'end',
            nameTextStyle:{
                color:'#FF00FF'
            }
        },
        series: seriesData
    };

    // 使用刚指定的配置项和数据显示图表。  
    myChart.setOption(option); 
</script>

{% endblock %}